<template>
	<input 
	:type="type" 
	v-model="inputValue"
	:disabled="disabled"
	:class="['input']" 
	:placeholder="placeholder"
	:maxlength="maxlength"
	@click="click"
	:style="custom" 
	@focus="focus" 
	@blur="blur">
</template>

<script>
	export default {
		name:"colorInput",
		props:{
			disabled: {
				type: Boolean,
				default: false
			},
			customStyle:{
				type: String,
				default: ''
			},
			focusColor: {
				type: String,
				default: '#006767'
			},
			modelValue: {
				type: null,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			maxlength: {
				type:[String,Number],
				default: 1000
			}
		},
		methods: {
			click() {
				this.$emit('click')
			},
			focus(e) {
				this.isFocus = true;
			},
			blur(e) {
				this.isFocus = false;
			}
		},
		computed: {
			custom() {
				return `${this.customStyle};${this.isFocus?`border-color:${this.focusColor}`:''}`
			},
			inputValue: {
				set(val) {
					this.$emit('update:modelValue',val)
				},
				get() {
					return this.modelValue
				}
			},
		},
		data() {
			return {
				isFocus: false
			};
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		box-sizing: border-box;
		padding: 0 30rpx;
		$h: 76rpx;
		width: 100%;
		height: $h;
		font-size: 30rpx;
		border-radius: math.div($h,2);
		border: 2rpx solid rgba(89, 103, 124, 0.25);
		transition: all .3s; 
	}
</style>